<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加载动画</title>
  <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #spinners{
        margin: 400px auto;
        width: 200px;
    }
    #preloader{
	    position:relative;
        
    }
    /* 第二步：开始写CSS样式 */
    /* 首先，配置五个span的初始样式 */
    #preloader span{
        position:absolute;
        width:20px;
        height:20px;
        background:#3498db;
        /* 透明度 */
        opacity:0.5;
        /* 圆角 */
        border-radius:20px;
        /* 设置动画名称为preloader，使用infinite设置动画无限循环 */
        -webkit-animation: preloader 1s infinite ease-in-out;
        -moz-animation: preloader 1s infinite ease-in-out;
        -ms-animation: preloader 1s infinite ease-in-out;
        -animation: preloader 1s infinite ease-in-out;

    }
    /* 使用animation-delay配置第二个到第五个的动画开始时间 */
    #preloader span:nth-child(2){
        left:20px;
        -webkit-animation-delay: .2s;
        -moz-animation-delay: .2s;
        -ms-animation-delay: .2s;
        animation-delay: .2s;
    }
    #preloader span:nth-child(3){
        left:40px;
        -webkit-animation-delay: .4s;
        -moz-animation-delay: .4s;
        -ms-animation-delay: .4s;
        animation-delay: .4s;
    }
    #preloader span:nth-child(4){
        left:60px;
        -webkit-animation-delay: .6s;
        -moz-animation-delay: .6s;
        -ms-animation-delay: .6s;
        animation-delay: .6s;
    }
    #preloader span:nth-child(5){
        left:80px;
        -webkit-animation-delay: .8s;
        -moz-animation-delay: .8s;
        -ms-animation-delay: .8s;
        animation-delay: .8s;
    }
    /* 动画代码 
    @keyframes中的样式规则可以由多个百分比构成
    0%到100%之间创建更多个百分比
    配置不同阶段的动画样式*/
    @keyframes preloader {
        0% {
            /* 透明度 */
            opacity: 0.3; 
            /* 上下偏移，负数是向上，正数是向下 */
            transform:translateY(0px);	
            /* 设置阴影 */
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        }
        50% {
            opacity: 1; 
            transform: translateY(-10px); 
            background:#f1c40f;	
            box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);
        }
        100% {
            opacity: 0.3; 
            transform:translateY(0px);	
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        }
    }
  </style>
</head>
<body>
    <!-- 第一步：写好五个span，用于做上下摆动的加载动画 -->
    <div id="spinners">
        <div id="preloader">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>